import React, { CSSProperties, PropsWithChildren, cloneElement, useRef } from "react"
import { useSize } from 'ahooks'
import './index.less'


interface CardProps extends PropsWithChildren {
    width?: number | string
    height: number | string
    title?: string
    style?: CSSProperties
    hideBorder?: boolean
}
const Card: React.FC<CardProps> = ({
    width,
    height,
    children,
    title,
    style,
    hideBorder,
}) => {
    const titleRef = useRef<HTMLDivElement>(null)

    const size = useSize(titleRef)

    let newHeight = parseInt(height as any)
    if (height.toString().indexOf('vh')) {
        newHeight = window.innerHeight * (newHeight / 100)
    }
    let contentHeight = newHeight - (size?.height || 0) - 35

    return <div style={{
        borderImage: hideBorder ? 0 : undefined,
        borderImageSlice: hideBorder ? 0 : undefined,
        borderImageOutset: hideBorder ? 0 : undefined,
        borderStyle: hideBorder ? 'none' : undefined,
        width,
        height,
        ...style,
    }} className="card_wrap">
        <div ref={titleRef} style={{ padding: !title ? 0 : undefined }} className="card_wrap_title">{title}</div>
        <div className="card_wrap_content">
            {children && size ? cloneElement(children as any, { ...size, height: contentHeight }) : null}
        </div>
    </div>
}

export default Card